<template>
  <v-home
      ref="vhome"
      :has-index="args.hasIndex"
      :loading="loading"
      :datas="datas"
      :total="total"
      :extend-class="args.extendClass"
      :titleText="args.titleText"
      :has-oper="args.hasOper"
      :has-remove="args.hasRemove"
      :type="type"
      :has-search="args.hasSearch"
      :has-keyword="args.hasKeyword"
      :has-add="args.hasAdd"
      :freshen="args?.freshen"
      :has-edit="args.hasEdit"
      :show-reset-pwd="args.showResetPwd"
      :is-view="args.isView"
      :is-paging="args.isPaging"
      :width="args.width"
      :page-list-no="pageListNo"
      :row-class-name="rowClassName"
      :is-head-end-show="isHeadEndShow"
      :fixed="fixed"
      :remove-text="removeText"
      :size="size"
      :lazy="lazy"
      :showUserOperate="args.showUserOperate"
      :showMobileOperate="args.showMobileOperate"
      @load="load"
      @single="single"
      @expand="expand"
      @search="search"
      @edit="edit"
      @remove="remove"
      @edit-child="editChild"
  >
    <template #args>
      <slot name="args"></slot>
    </template>
    <template #btns>
      <slot name="btns"></slot>
    </template>
    <slot name="parts"></slot>
    <template #edit>
      <slot name="edit" :init="info" :close="close"></slot>
    </template>
  </v-home>
</template>

<script setup>
import vHome from "./vHome.vue";
import {ref, watch} from "vue";
import {ElMessage} from "element-plus";

const props = defineProps({
  total: Number,
  hasOper: {
    type: Boolean,
    default: true,
  },
  hasRemove: {
    type: Boolean,
    default: true,
  },
  hasSearch: {
    type: Boolean,
    default: true,
  },
  hasEdit: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: "",
  },
  pageListNo: {
    type: Number,
    default: 1,
  },
  rowClassName: {type: Function, default: () => "intro-x"},
  tableData: {
    type: Array,
    default: () => [],
  },
  isHeadEndShow: {
    type: Boolean,
    default: true,
  },
  fixed: {
    type: Boolean,
    default: false,
  },
  removeText: {
    type: String,
    default: "是否要删除此条数据？",
  },
  size: {
    type: Number,
    default: 10,
  },
  lazy: {
    type: Boolean,
    default: false,
  },
  endSearch: Function,
  // 变化点
  args: {
    type: Object,
    default: function () {
      return null;
    },
  },
  type: Number,
});

const loading = ref(false);
const datas = ref([]);
const total = ref(0);
const info = ref(null);

const emit = defineEmits([
  "load",
  "single",
  "expand",
  "edit",
  "remove",
  "frozen",
  "edit-child",
]);

// 单选
const single = (info) => {
  emit("single", info);
};
// 展开
const expand = (info) => {
  emit("expand", info);
};

// 显示编辑区
const edit = (val) => {
  console.log(val);
  info.value = val;
};
// 关闭编辑区
const close = () => {
  info.value = null;
  search();
};

// 执行查询
const search = (args) => {
  console.log(args, "执行了查询");
  let newArgs = {};
  if (args?.keyword) newArgs = args;
  const command = buildSearch(newArgs);
  if (command) {
    loading.value = true;
    command
        .then((data) => {
          loading.value = false;
          if (Array.isArray(data)) {
            datas.value = data;
            total.value = data.length;
          } else if (data.rows) {
            datas.value = data.rows;
            total.value = data.total;
          } else if (data.children) {
            datas.value = data.children;
            total.value = data.children.length;
          }
        })
        .catch((err) => {
          loading.value = false;
          console.log(err);
          ElMessage.error(err);
          // this.$messageError(err);
        });
  }
};
const buildSearch = (args) => {
  // 如果是初始化查询，使用原有的search方法
  if (!args && props.args?.search) {
    const processedArgs = props.args?.keyword ? props.args.keyword(args) : args;
    if (processedArgs !== false) {
      return props.args.search(processedArgs);
    }
  }
  
  // 如果是点击查询按钮，且存在自定义查询方法，则使用自定义查询
  if (args && props.args?.customSearch) {
    return props.args.customSearch(args);
  }
  
  // fallback到原有的查询逻辑
  if (props.args?.search) {
    const processedArgs = props.args?.keyword ? props.args.keyword(args) : args;
    if (processedArgs !== false) {
      return props.args.search(processedArgs);
    }
  }
};
// 删除并刷新列表
const remove = (info, args) => {
  console.log("=>(hBase.vue:185) info", info);
  const command = buildRemove(info);
  if (command) {
    command
        .then(() => {
          ElMessage({
            message: '删除成功!',
            type: 'success',
          })
          search();
        })
        .catch((err) => {
          ElMessage.error(err);
        });
  }
};
const buildRemove = (info) => {
  if (props.args?.remove && props.args?.key) {
    // emit("remove", props.args.remove(props.args.key(info)));
    return props.args.remove(props.args.key(info));
  }
};

const editChild = (info, index) => {
  emit("edit-child", info, index);
};

const load = (tree, treeNode, resolve) => {
  emit("load", tree, treeNode, resolve);
};

// 监听器定义
watch(
    () => props.tableData,
    (arr) => {
      if (arr) {
        datas.value = arr;
        total.value = arr.length;
      }
    },
    {deep: true, immediate: true}
);

// 暴露方法给父组件
defineExpose({
  search
});
</script>